import {Component, ComponentProps, VueComponent, Link, Hook, Mut, Computed} from "vue3-oop";
import {NButton, NButtonGroup, NSpace, NDropdown, NScrollbar} from "naive-ui";
import LogicFlow from '@logicflow/core';

import Codemirror from "codemirror-editor-vue3";
import 'codemirror/theme/monokai.css'
import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/mode/xml/xml.js';

interface IProps {
  logicFlow: LogicFlow
}
@Component()
export default class ToolbarPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    logicFlow:{}
  }

  constructor() {
    super()
  }

  /** 预览BPMN的XML内容 */
  private handlePreviewBpmn=()=>{
    const content = this.props.logicFlow.getGraphData() as string;
    const dialog = window.$popUp({
      style: {width:`${window.$size.width-200}px`,height:`${window.$size.height-200}px`,padding:"10px"},
      title: "BPMN预览",
      content:()=>(
        <NScrollbar style={{maxHeight:`${window.$size.height-250}px`}} xScrollable={true}>
          <Codemirror
            value={content}
            border
            options={{
              mode: 'xml', // 语言模式
              theme: 'darcula', // 主题
              lineNumbers: true, // 显示行号
              smartIndent: true, // 智能缩进
              readOnly: true,
              indentUnit: 4, // 智能缩进单位为4个空格长度
              foldGutter: true, // 启用行槽中的代码折叠
              styleActiveLine: true // 显示选中行的样式
            }}
          />
        </NScrollbar>
      )
    });
  }

  /** 导入文件 */
  private handleImportBpmnFile =()=>{
    const input = document.createElement('input');
    input.value = '选择文件';
    input.type = 'file';
    input.accept = 'application/xml';
    input.onchange = (event:any) => {
      if(event.target.files.length>0){
        const reader = new FileReader();
        reader.readAsText(event.target.files[0]);
        reader.onload = ()=>{
          this.props.logicFlow.render(reader.result as string);
        };
      }
    };
    input.click();
  }

  /** 导出文件 */
  private handleExportBpmnFile =()=>{
    // TODO filename
    const content = this.props.logicFlow.getGraphData() as string;
    const time = (new Date()).getTime();
    const filename = `filename.${time}.bpmn20.xml`;
    const downlink = `data:text/plain;charset=UTF-8,${encodeURIComponent(content)}`;
    const a = document.createElement("a");
    a.download = filename; //指定下载的文件名
    a.href = downlink; //  URL对象
    a.click(); // 模拟点击
    URL.revokeObjectURL(a.href); // 释放URL 对象
  }

  /** 导出图片 */
  private handleExportImageFile=()=>{
    this.props.logicFlow.getSnapshot();
  }

  render(){

    return(
      <NSpace>
        <NButtonGroup size={"small"}>
          <NButton onClick={this.handlePreviewBpmn}>预览</NButton>
          <NButton onClick={this.handleImportBpmnFile}>导入</NButton>
          <NDropdown size="small" options={[{key:'PNG',label:'PNG',props:{onClick:this.handleExportImageFile}}]}>
            <NButton onClick={this.handleExportBpmnFile}>导出</NButton>
          </NDropdown>
        </NButtonGroup>
      </NSpace>
    )
  }
}